/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';
@import './vars.less';

@option-prefix-cls: ~'@{css-prefix}option';
@select-dropdown-prefix-cls: ~'@{css-prefix}select-dropdown';
@checkbox-prefix-cls: ~'@{css-prefix}checkbox';

.@{select-dropdown-prefix-cls} {
  .component-css-vars-option();

  &.is-multiple {
    .@{option-prefix-cls} {
      &.selected {
        color: var(--ti-option-text-color);
        background-color: var(--ti-option-bg-color-selected);

        &:hover {
          background-color: var(--ti-option-hover-bg-color-selected);
        }

        &.is-disabled {
          color: var(--ti-option-disabled-text-color);

          &:hover {
            background-color: var(--ti-option-disabled-bg-color);
          }
        }
        .@{option-prefix-cls}__checkbox-wrap {
          color: var(--ti-option-selected-text-color);
        }
      }
    }
  }
}

.@{option-prefix-cls} {
  position: relative;
  color: var(--ti-option-text-color);
  font-size: var(--ti-option-font-size);
  height: var(--ti-option-height);
  display: flex;
  align-items: center;
  cursor: pointer;
  line-height: 1.5;
  box-sizing: border-box;
  margin-top: var(--ti-option-margin-top);
  border-radius: var(--ti-option-border-radius);

  & > .@{option-prefix-cls}__label {
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  & > .@{option-prefix-cls}__icon {
    font-size: var(--ti-option-icon-size);
    margin-right: var(--ti-option-icon-margin-right);
  }

  &.is-disabled {
    color: var(--ti-option-disabled-text-color);
    cursor: not-allowed;
  }

  &.hover,
  &:hover {
    background-color: var(--ti-option-hover-bg-color);

    &.is-disabled {
      background-color: var(--ti-option-disabled-bg-color);
    }
  }

  &:not(.is-disabled):not(.selected):hover {
    .@{checkbox-prefix-cls}__inner {
      border-color: var(--ti-option-checkbox-border-color-hover);
    }
    .halfselect,
    .checked-sur {
      .@{checkbox-prefix-cls}__inner {
        border-color: var(--ti-option-checkbox-all-select-border-color-hover);
      }
    }
  }

  & &-checkbox {
    vertical-align: top;
  }

  & &-wrapper {
    // aui 为display:inline-block  height: 100%;
    // 100%会让元素不能对齐， 该div比前面的check-box高，所以去掉它。
    // inline-block 会让业务的插槽传入的flex-basis不生效。 aui要求业务整改了。 回头改为 inline-block
    display: flex;

    &.calc-width {
      width: calc(100% - 24px);
    }

    &.full-width {
      width: 100%;
    }
  }

  & &-label {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &.selected {
    color: var(--ti-option-selected-text-color);
    background-color: var(--ti-option-selected-bg-color);
    font-weight: var(--ti-option-selected-font-weight);

    &:hover {
      background-color: var(--ti-option-selected-bg-color-hover);
    }
  }

  .@{checkbox-prefix-cls} {
    vertical-align: middle;
    margin-right: 8px;
    margin-bottom: 2px;
  }

  .checked-sur,
  .halfselect {
    .@{checkbox-prefix-cls}__label {
      font-weight: var(--ti-option-selected-font-weight);
    }
  }

  &.memorize-highlight {
    color: var(--ti-option-highlight-text-color);
  }

  &.memorize-highlight.selected {
    color: var(--ti-option-highlight-selected-text-color);
  }
}
